<template>

	<!-- 	<el-dialog
	  title="提示"
	  width="30%"
	   :loading="loading" 
	   :title="title" 
	   :visible.sync="value
	   "@close="cancel"
		@open="open" width="80%"
		 height="80%"
	  :before-close="handleClose">
	  <span>这是一段信息</span>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
	  </span>
	</el-dialog> -->

	<abstract-dialog :class="type=='add'?'max_wid':''" :loading="loading" :title="title" :value="value" @close="cancel"
		@open="open" width="80%" height="80%">
		<abstract-form :model="form" :rules="rules">
			<el-form-item label="工单号" prop="name" style="width: 500px;">
				<el-input style="width: 300px;" v-model="form.time_" :readonly="!canEdit" maxlength="20" disabled />
				<el-button style="position: absolute;right: 0;" v-if="detail.addPalletAndBoxesMsgs&&!detail.addPalletAndBoxesMsgs.length" type="primary" @click="addTp(1)">添加托盘</el-button>
			</el-form-item>

			<!-- {{time}} -->
			<!--  <el-form-item label="行政区域" prop="regionName">
                <region-selector
                    :value="form.regionName"
                    :readonly="!canEdit"
                    @clear="clearRegion"
                    @select="selectRegion"
                />
            </el-form-item> -->
			<!-- <el-form-item>
				 <el-button size="small" type="primary" @click="confirm">点击获取摄像头信息</el-button>
			</el-form-item> -->
			<el-dialog :title="type == 1?'添加托盘':'添加箱子'" :visible.sync="dialogFormVisible" :modal="0==1"
				class="small_dia">
				<div style="margin: 20px 0 0 20px;">
					<span>{{type == 1?'托盘码:':'追溯码:'}}</span>
					<el-input style="width: 300px;margin-left: 10px;" v-model="form.name" autocomplete="off"></el-input>
				</div>
				<!-- 		  <el-form :model="form">
			    <el-form-item label="托盘码" :label-width="formLabelWidth">
			      <el-input v-model="form.name" autocomplete="off"></el-input>
			    </el-form-item>
			    
			  </el-form> -->
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addTp_Data()">确 定</el-button>
				</div>
			</el-dialog>

			<el-table :row-class-name="tableRowClassName" :data="detail.addPalletAndBoxesMsgs" style="width: 100%"
				default-expand-all>
				<el-table-column type="expand">
					<template slot-scope="props">
						<span>追溯码:</span>
						<el-button style="float: right;" type="text" @click="addTp(2,props)">新增箱子</el-button>
						<!-- <i class="el-icon-circle-plus"></i> -->
						<div>
							<span v-for="(item,index) in props.row.addBoxMsgList"
								style="margin: 20px;display: inline-block;">
								<span >{{ item.code }}</span>
								<span v-if="item.process == 1 || item.process == 3"><i style="margin-left: 5px;cursor: pointer;"
								 class="el-icon-circle-close"
									@click="delD(props,index,item)"></i></span>
								
							</span>
							<!-- <i class="el-icon-circle-plus"></i> -->
						</div>
						<!-- 	<el-form label-position="left" inline class="demo-table-expand">
							
						<el-form-item label="码箱">
							<span>{{ item }}</span>
						  </el-form-item> -->
						<!-- 
						  <el-form-item label="所属店铺">
							<span>{{ props.row.shop }}</span>
						  </el-form-item>
						  <el-form-item label="商品 ID">
							<span>{{ props.row.id }}</span>
						  </el-form-item>
						  <el-form-item label="店铺 ID">
							<span>{{ props.row.shopId }}</span>
						  </el-form-item>
						  <el-form-item label="商品分类">
							<span>{{ props.row.category }}</span>
						  </el-form-item>
						  <el-form-item label="店铺地址">
							<span>{{ props.row.address }}</span>
						  </el-form-item>
						  <el-form-item label="商品描述">
							<span>{{ props.row.desc }}</span>
						  </el-form-item> -->
						<!-- </el-form> -->
					</template>
				</el-table-column>
				<el-table-column label="托盘码" prop="code">
				</el-table-column>
				<el-table-column label="状态" prop="name">
					<template slot-scope="props">
						<span v-if="props.row.process==1">已绑定</span>
					</template>
				</el-table-column>
				<el-table-column label="绑定时间" prop="actDate">
					<template slot-scope="props">
						<span>{{formatDate(props.row.actDate,'yyyy-MM-dd hh:mm')}}</span>
					</template>

				</el-table-column>
				<el-table-column label="操作" prop="desc">
					<template slot-scope="props">
						<!-- <el-button type="text">删除</el-button> -->
						<i class="el-icon-delete" @click="delP(props)"></i>
					</template>
				</el-table-column>
			</el-table>

			<div v-for="item in form.arr" style="display: inline-block;">
				<el-form-item label="托盘码" prop="address" style="width: 300px;">
					<el-input v-model="form.pallet_code" maxlength="100" />
				</el-form-item>
				<el-form-item label="追溯码" prop="linkman" style="width: 300px;">
					<el-input placeholder="多个用,隔开" type="textarea" v-model="form.case_code" />
				</el-form-item>

			</div>
			<!-- <div style="display: inline-block;width: 300px;height: 120px;">
				<el-button style="margin-left: 20px;" size="small" type="primary" @click="confirm1">新增托盘</el-button>
			</div> -->
			<!-- <el-form-item label="联系电话" prop="linkphone">
                <el-input v-model="form.linkphone" :readonly="!canEdit" maxlength="20"/>
            </el-form-item> -->
			<!-- <el-form-item label="状 态" prop="enable">
                <el-radio-group v-model="form.enable" :disabled="!canEdit">
                    <el-radio :label="true">绑定</el-radio>
                    <el-radio :label="false">解绑</el-radio>
                </el-radio-group>
            </el-form-item> -->
			<!--            <el-form-item label="备 注" prop="remark">
                <el-input
                    v-model="form.remark"
                    :rows="4"
                    :readonly="!canEdit"
                    maxlength="200"
                    show-word-limit
                    type="textarea"
                />
            </el-form-item> -->
			<audio ref="audio">
				<source src="../baojing.mp3" type="audio/mp3">
			</audio>
			<audio ref="audio1">
				<source src="../chenggong.mp3" type="audio/mp3">
			</audio>
		</abstract-form>

		<template v-slot:footer>
			<el-button plain size="small" @click="closeDialog">取 消</el-button>
			<el-button size="small" type="danger" @click="confirm">结束任务</el-button>
		</template>
	</abstract-dialog>
</template>

<script>
	import dialogMixin from "@/mixin/dialogMixin"
	import AbstractForm from "@/component/abstract/Form"
	import AbstractDialog from '@/component/abstract/Dialog'
	import RegionSelector from '@/component/RegionSelector'
	// import {elConfirm, elError, elSuccess} from "@/util/message"
	// /mini-wms/wms/in/orderin/detail/1714892388578623488
	import {
		add,
		update
	} from "@/api/erp/index"
	import {
		isEmpty,
		mergeObj,
		resetObj
	} from '@/util'
	import {
		elConfirm
	} from "@/util/message"
	
	var request_url = localStorage.getItem('request_url')||''

	export default {
		name: "EditDialog",

		mixins: [dialogMixin],

		components: {
			AbstractForm,
			AbstractDialog,
			RegionSelector
		},

		props: {
			value: Boolean,
			type: {
				type: String,
				default: 'see'
			},
			time: String,
			data: {
				type: Object,
				default: () => ({})
			},
		},

		data() {
			return {

				detail: {},
				dialogFormVisible: false,
				loading: false,
				tableData: [],
				form: {
					arr: [],
					work_order_number: '',
					pallet_code: null,
					case_code: null,
					enable: true,
					time_:this.props?this.props.corpOrderID:''
				},
				rules: {
					// name: [{required: true, message: '名称不能为空', trigger: 'change'}],
					// address: [{required: true, message: '地址不能为空', trigger: 'change'}],
					// linkman: [{required: true, message: '联系人不能为空', trigger: 'change'}],
					// linkphone: [{required: true, message: '联系电话不能为空', trigger: 'change'}],
					// regionName: [{required: true, message: '行政区域不能为空', trigger: 'change'}],
				}
			}
		},

		created() {

			console.log(1121313)
		},

		computed: {
			title() {

				if (isEmpty(this.type)) return ''
				switch (this.type) {
					case 'see':
						return '客户信息'
					case 'add':
						return '创建出库任务'
					case 'edit':
						return '创建出库任务'
				}
			},


			confirmMessage() {
				this.form.work_order_number = this.time
				switch (this.type) {
					case 'add':
						return `确认结束工单【${this.time}】的任务?`
					case 'edit':
						return `确认对【${this.time}】工单进行出库操作？`
					default:
						return ''
				}
			},

			canEdit() {
				return ['add', 'edit'].includes(this.type)
			}
		},

		methods: {
			putDh(orderId) {
				this.$http.put(`${request_url}/mini-wms/wms/out/orderout/${orderId}`).then(response => {
					console.log(response.body.dataObj)
					this.$emit('success', '结束入库单成功')
					this.$emit('getList')

					this.getDeatil()
					this.dialogFormVisible = false
				})
			},
			padLeftZero(str) {
				return ('00' + str).substr(str.length)
			},
			formatDate(date, fmt) {
				console.log(date, 'date')
				date = Date.parse(date)
				date = new Date(Number(date))
				console.log(date, '78779998')

				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				let o = {
					'M+': date.getMonth() + 1,
					'd+': date.getDate(),
					'h+': date.getHours(),
					'm+': date.getMinutes(),
					's+': date.getSeconds()
				}
				for (let k in o) {
					if (new RegExp(`(${k})`).test(fmt)) {
						let str = o[k] + ''
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
					}
				}
				return fmt
			},
			addTp_Data() {
				if (this.type == 1) {
					let json = {
						"actDate": Date.parse(new Date()),
						"code": this.form.name,
						"corpID": "",
						"corpOrderID": localStorage.getItem('gd_id'),
						"orderId": this.detail.orderInId,
						"wrongCode": ""
					}

					this.$http.post(`${request_url}/mini-wms/wms/out/orderout/pallet`, json).then(response => {
						console.log(response.body.dataObj)
						if (response.body.code == '100000') {
							console.log('11111111111')
							// this.$emit('elError', response.body.msg)
							this.$message({
								message: response.body.msg,
								type: 'warning'
							});
							this.$refs.audio.play();
							return
						}

						this.getDeatil()
						this.dialogFormVisible = false
					})
					// .then()
				} else {
					let data = {
						"actDate": "",
						"code": this.form.name,
						"corpID": "",
						"corpOrderID": localStorage.getItem('gd_id'),
						"palletId": this.palletId,
						"process": 0,
						"wrongCode": ""
					}
					console.log(this.palletId)
					// return
					this.$http.post(`${request_url}/mini-wms/wms/out/orderout/pallet/box`, data).then(response => {
						console.log(response.body.dataObj)
						if (response.body.code == '100000') {
							console.log('11111111111')
							// this.$emit('elError', response.body.msg)
							this.$message({
								message: response.body.msg,
								type: 'warning'
							});
							this.$refs.audio.play();
							return
						} 
						this.getDeatil()
						this.dialogFormVisible = false
					})
				}

				// this.tableData.push({

				// })


			},
			getDeatil() {
				this.$http.get(`${request_url}/mini-wms/wms/out/orderout/detail/${localStorage.getItem('gd_id')}`).then(response => {
					console.log(response.body.dataObj)
					this.form.time_ = localStorage.getItem('gd_id')

					this.detail = response.body.dataObj
					this.tableData = response.body.dataObj.addPalletAndBoxesMsgs
				})
			},
			delP(a) {
				elConfirm(`是否进行删除操作？`)
					.then(() => {
						// this.tableData.splice([a.$index], 1)
						return this.$http.delete(`${request_url}/mini-wms/wms/out/orderout/pallet/${a.row.id}`).then(response =>{
							this.getDeatil()
							
						})
					})
			},
			delD(a, b,c) {
				console.log(a)
				console.log(c)
				// return
				
				elConfirm(`是否进行删除操作？`)
					.then(() => {
						// this.tableData[a.$index].data.splice(b, 1)
						return this.$http.delete(`${request_url}/mini-wms/wms/out/orderin/pallet/box/${c.id}`).then(response =>{
							this.getDeatil()
							
						})
					})

			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				console.log(rowIndex)
				if (rowIndex === 0) {
					// this.getDeatil()
				}
				return 'warning-row';
				// if (rowIndex%2==0) {
				//   return 'warning-row';
				// } 
			},
			addTp(e, d) {
				this.type = e
				console.log(d, 'ddd')
				if (d) {
					this.palletId = d.row.code
				}
				this.dialogFormVisible = true
			},

			confirm1() {
				this.form.arr.push({
					case: 1,
					value: '41251151,4124141'
				})
			},

			clearRegion() {
				this.form.region = null
				this.form.regionName = null
			},

			selectRegion(obj) {
				this.form.region = obj.id
				this.form.regionName = obj.fullname
			},

			open() {
				if (this.type !== 'add') mergeObj(this.form, this.data)
			},

			clearForm() {
				resetObj(this.form)
				this.$nextTick(() => this.$refs.form.clearValidate())
			},

			cancel() {
				this.closeDialog()
				this.clearForm()
			},

			confirm() {
				if (this.loading) return
				this.$refs.form.validate(v => {
					if (!v) return
					elConfirm(this.confirmMessage)
						.then(() => {
							this.loading = true
							// return this.type === 'add' ? add.request(this.form) : update.request(this.form)
							this.putDh(this.detail.orderInId)
						})
						.then(({
							msg
						}) => this.$emit('success', msg))
						.finally(() => this.loading = false)
				})
			}
		}
	}
</script>
<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.max_wid .el-dialog {
		height: 80%;
		position: relative;
	}

	.small_dia .el-dialog {
		height: 30%;
	}

	.max_wid {
		/* position: relative; */
	}

	.max_wid .el-dialog__footer {
		position: absolute;
		right: 20px;
		bottom: 20px;
	}

	.max_wid .el-scrollbar__view {
		max-height: 70vh;
		overflow: auto;
	}

	.max_wid .el-dialog .el-dialog__footer {
		border-top: none;
	}
</style>